<template>
	<navigator :url="'/pages/goods_detail/index?id=' + goods_id" class="product_container" >
		<view class="product_image">
			<!-- 或运算表示当前面的值为false的时候，读取后面的值，如果是true，直接读取前面的值 -->
			<image :lazy-load="true" :src="goods_small_logo || '/static/empty.png'"></image>
		</view>
		<view class="product_info">
			<view class="title">{{goods_name}}</view>
			<view class="price_count" v-if="goods_price">
				<view class="price">¥{{goods_price}}</view>
				<view class="count" v-if="goods_amount">x{{goods_amount}}</view>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		props: {
			goods_id: {
				type: Number,
				required: true,
			},
			goods_small_logo: {
				type: String,
			},
			goods_name: {
				type: String,
				required: true
			},
			goods_price: Number,
			goods_amount: Number
		}
	}
</script>

<style lang="less">
	.product_container {
	
		display: flex;
		margin: 9rpx 26rpx;
	
		.product_image {
			margin-right: 19rpx;
	
			image {
				width: 191rpx;
				height: 191rpx;
			}
		}
	
		.product_info {
			padding: 26rpx 0;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			flex: 1;
	
			.title {
				color: #434343;
			}
	
			.price_count {
				display: flex;
				justify-content: space-between;
	
				.price {
					color: #EA4350;
				}
	
				.count {
					font-size: 28rpx;
					color: #434343;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>